

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
      margin: auto;
      width: 530px;
      text-align: center;
    }
    .grid table {
      border-top: 1px solid #C2D89A;
      width: 100%;
      border-collapse: collapse;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed #F3DCAB;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: #F3DCAB;
    }
    .grid .book {
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: #F3DCAB;
    }
    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: #F3DCAB;
      border-top: 1px solid #C2D89A;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="grid">
    <div>
      <h1>图书管理</h1>
      <div class="book">
        <div>
          <label for="id">
            编号：
          </label>
          <input type="text" id="id" v-model='id' disabled="false" v-focus>
          <label for="name">
            名称：
          </label>
          <input type="text" id="name" v-model='name'>
          <button @click='handle' :disabled="submitFlag">提交</button>
        </div>
      </div>
    </div>
    <div class="total">
      <span>图书总数：</span>
      <span>{{total}}</span>
    </div>
    <table>
      <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr :key='item.id' v-for='item in books'>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
        <td>
          <a href="" @click.prevent='toEdit(item.id)'>修改</a>
          <span>|</span>
          <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
  /*
    图书管理-添加图书
  */
  axios.defaults.baseURL='http://localhost:3000/'
  axios.interceptors.response.use(function (res) {
    return res.data
  },function (err)  {
    console.log(err)
  })
  Vue.directive('focus', {
    inserted: function (el) {
      el.focus();
    }
  });
  Vue.filter('format', function(value, arg) {
    function dateFormat(date, format) {
      if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
          date = parseInt(mts[2]);
        }
      }
      date = new Date(date);
      if (!date || date.toUTCString() == "Invalid Date") {
        return "";
      }
      var map = {
        "M": date.getMonth() + 1, //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      };
      format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
        var v = map[t];
        if (v !== undefined) {
          if (all.length > 1) {
            v = '0' + v;
            v = v.substr(v.length - 2);
          }
          return v;
        } else if (t === 'y') {
          return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
      });
      return format;
    }
    return dateFormat(value, arg);
  })
  var vm = new Vue({
    el: '#app',
    data: {
      flag: false,
      submitFlag: false,
      id: '',
      name: '',
      books: []
    },
    methods: {
      handle:async function(){
        if(this.flag) {
          // 编辑图书
          // 就是根据当前的ID去更新数组中对应的数据
          // this.books.some((item) => {
          //   if(item.id == this.id) {
          //     item.name = this.name;
          //     // 完成更新操作之后，需要终止循环
          //     return true;
          //   }
          // });
          var ret=await axios.put('books/'+this.id,{
            name:this.name
          })
          if (ret.status==200){
            this.queryData()
          }
          this.flag = false;
        }else{
          // 添加图书
          var ret= await axios.post('books',{
            name:this.name
          })
          if (ret.status==200){
            this.queryData()
          }
        }
        // 清空表单
        this.id = '';
        this.name = '';
      },
      toEdit:async function(id){
        // 禁止修改ID
        this.flag = true;
        // console.log(id)
        // // 根据ID查询出要编辑的数据
        // var book = this.books.filter(function(item){
        //   return item.id == id;
        // });
        // console.log(book)
        // // 把获取到的信息填充到表单
        // this.id = book[0].id;
        // this.name = book[0].name;
        var ret=await axios.get('books/'+id)
        this.id=ret.id
        this.name=ret.name
      },
      deleteBook:async function(id){
        // 删除图书
        // 根据id从数组中查找元素的索引
        // var index = this.books.findIndex(function(item){
        //   return item.id == id;
        // });
        // 根据索引删除数组元素
        // this.books.splice(index, 1);
        // -------------------------
        // 方法二：通过filter方法进行删除
        // this.books = this.books.filter(function(item){
        //   return item.id != id;
        // });
        var ret=await axios.delete('books/'+id)
        if (ret.status==200){
          this.queryData()
        }
      },
      async queryData(){
          // axios.get('books').then((data)=>{
          //     console.log(data)
          //     this.books=data.data
          // })
        // var ret=await axios.get('books')
        // this.books=ret.data
        this.books=await axios.get('books')
      }
    },
    computed: {
      total: function(){
        // 计算图书的总数
        return this.books.length;
      }
    },
    watch: {
      name: async function(val) {
        // 验证图书名称是否已经存在
        // var flag = this.books.some(function(item){
        //   return item.name == val;
        // });
        var ret=await axios.get('/books/book/'+this.name)
        if(ret.status==1) {
          // 图书名称存在
          this.submitFlag = true;
        }else{
          // 图书名称不存在
          this.submitFlag = false;
        }
      }
    },
    mounted: function(){
      this.queryData()
    }
  });
</script>
</body>
</html>
